<style>
  cr-dialog::part(dialog) {
    background-color: var(--cros-bg-color-elevation-3);
    border-radius: 0;
    height: 100%;
    width: 100%;
  }

  cr-dialog::part(wrapper) {
    /* Subtract the internal padding in <cr-dialog>. */
    padding: calc(24px - 20px);
  }

  cr-input {
    --cr-form-field-label-color: var(--cros-textfield-label-color);
    --cr-input-background-color: var(--cros-textfield-background-color);
    --cr-input-color: var(--cros-textfield-input-color);
    --cr-input-error-color: var(--cros-textfield-label-color-error);
    --cr-input-error-display: none;
    --cr-input-focus-color: var(--cros-textfield-label-color-focus);
    margin-bottom: var(--cr-form-field-bottom-spacing);
  }

  cr-button {
    --active-bg: transparent;
    --active-shadow:
      0 1px 2px var(--cros-button-active-shadow-color-key-secondary),
      0 1px 3px var(--cros-button-active-shadow-color-ambient-secondary);
    --active-shadow-action:
      0 1px 2px var(--cros-button-active-shadow-color-key-primary),
      0 1px 3px var(--cros-button-active-shadow-color-ambient-primary);
    --bg-action: var(--cros-button-background-color-primary);
    --border-color: var(--cros-button-stroke-color-secondary);
    --disabled-bg-action:
      var(--cros-button-background-color-primary-disabled);
    --disabled-bg: var(--cros-button-background-color-primary-disabled);
    --disabled-border-color:
      var(--cros-button-stroke-color-secondary-disabled);
    --disabled-text-color: var(--cros-button-label-color-secondary-disabled);
    --hover-bg-action: var(--cros-button-background-color-primary-hover-preblended);
    --hover-bg-color: var(--cros-button-background-color-secondary-hover);
    --hover-border-color: var(--cros-button-stroke-color-secondary-hover);
    --ink-color: var(--cros-button-ripple-color-secondary);
    --ripple-opacity-action: var(--cros-button-primary-ripple-opacity);
    --ripple-opacity: var(--cros-button-secondary-ripple-opacity);
    --text-color-action: var(--cros-button-label-color-primary);
    --text-color: var(--cros-button-label-color-secondary);
  }

  cr-button.action-button {
    --ink-color: var(--cros-button-ripple-color-primary);
  }

  :host-context(.focus-outline-visible) cr-button:focus {
    /* disable the focus shadow because we use outline below */
    box-shadow: none;
    outline: 2px solid var(--cros-focus-ring-color);
    outline-offset: 2px;
  }

  .action-button:not(:active):hover {
    box-shadow: none;
  }

  [slot='title']  {
    padding-top: 4px;
    --cr-primary-text-color: var(--cros-text-color-primary);
  }

  [slot='body'] #password {
    margin-bottom: 0;
  }

  [slot='button-container']  {
    padding-bottom: 20px;
    padding-top: 32px;
  }
</style>

<cr-dialog id="dialog">
  <div slot="title">[[i18n('smbCredentialsDialogTitle', sharePath_)]]</div>
  <div slot="body" spellcheck="false">
    <cr-input id="username" label="[[i18n('smbCredentialsUsername')]]"
          value="{{username_}}">
    </cr-input>
    <cr-input id="password" type="password"
        label="[[i18n('smbCredentialsPassword')]]" value="{{password_}}">
    </cr-input>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="onCancelButtonClick_">
      [[i18n('cancel')]]
    </cr-button>
    <cr-button class="action-button" on-click="onSaveButtonClick_"
        disabled="[[!username_]]">
      [[i18n('save')]]
    </cr-button>
  </div>
</cr-dialog>
